<template>
  <h1>待办事项</h1>
  <div>
    <el-button type="primary" @click="onCreateClick()">添加</el-button>
  </div>

  <el-dialog v-model="createDialogFormVisible" title="创建待办事项" width="500">
    <el-form :model="createForm">
      <el-form-item label="标题">
        <el-input v-model="createForm.title" autocomplete="off" placeholder="请输入标题" />
      </el-form-item>
      <el-form-item label="内容">
        <el-input
          v-model="createForm.content"
          autocomplete="off"
          type="textarea"
          placeholder="请输入内容"
        />
      </el-form-item>
      <el-form-item label="优先级">
        <!-- 写死页面 -->
        <!-- <el-select v-model="createForm.priority" placeholder="请选择优先级">
          <el-option label="正常" :value="1" />
          <el-option label="紧急" :value="2" />
          <el-option label="加急" :value="3" />
        </el-select> -->

        <el-select v-model="createForm.priority" placeholder="请选择优先级">
          <el-option
            v-for="(item, index) in priorityArr"
            :key="index"
            :label="item.name"
            :value="item.priority"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="onCreateCancleClick">取消</el-button>
        <el-button type="primary" @click="onCreateConfirmClick"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { toDosCreateReq, type IToDos } from '@/api/toDos'
import { ElMessage } from 'element-plus'
import { reactive, ref } from 'vue'

const createDialogFormVisible = ref(false)
const createForm = reactive<IToDos>({ title: '', content: '', priority: 2, creatorId: '' })

interface Ipriority {
  priority: number
  name: string
}

const priorityArr = ref<Ipriority[]>([])

setTimeout(() => {
  priorityArr.value = [
    { priority: 1, name: '正常' },
    { priority: 2, name: '紧急' },
    { priority: 3, name: '加急' },
    { priority: 4, name: '加急111' },
  ]
}, 2000)

function onCreateClick() {
  createDialogFormVisible.value = true
}
function onCreateCancleClick() {
  createDialogFormVisible.value = false
  createForm.title = ''
  createForm.content = ''
  createForm.priority = 2
  // createForm = { title: '', content: '', priority: 2 }
}
function onCreateConfirmClick() {
  createDialogFormVisible.value = false
  createForm.creatorId = localStorage.getItem('xx-mall-b-adminid') ?? ''

  toDosCreateReq(createForm).then((res) => {
    if ((res.data.code = 200)) {
      ElMessage({
        message: '创建成功',
        type: 'success',
      })
    }
  })
  onCreateCancleClick()
}
</script>
<style lang="css" scoped></style>
